<!-- 分页结果 -->
<!--分页-->
<template>
  <div class="margin-top-20 page-result">
    <!--<el-card class="margin-top-20" v-for="i in 7" :key="i">-->
<!---->
<el-card class="margin-top-20">          
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
        
          <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar">
              <table>
                <tr>
                  <td >1</td>
                  <td>New</td>
                </tr>
              </table>

              <a id="c1" href="#" target="_blank" class="anchor">
                <img
                  src="http://pics0.baidu.com/feed/574e9258d109b3de7694cc410288bd87800a4caa.jpeg"
                  
                  width="185px"
                  height="90px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">01:13</div>
            </div>
          
            <div class="up-info__info">
              <div>
                <span class="font-bolder">小鬼演唱会疑似被鬼屋附身</span>
              </div>
              <div><span>简介</span><span>微博 太哈人了</span></div>
              <div class="info-list-name">
                西姆斯饼饼 | 2021-06-01 11:30:26 发布
              </div>
              <div class="tagList">
                <div class="tag">音乐</div>
                <div class="tag">抽象</div>
                <div class="tag">小鬼</div>
                <div class="tag">王琳凯</div>
                <div class="tag">小鬼王琳凯</div>
              </div>
            </div>
        </div>

     
      </div>     
      </div>             
    </el-card>

<el-card class="margin-top-20">
  <!--一级分类-->
        
      <div style="display: flex; justify-content: flex-end width:60px;height:70px"><!--留-->
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        ><!--留--> 
</div>
      </div>
    <div class="line-1px" />
      <div style="display: flex; justify-content: space-around">
        
        <table>
          <tr style="width:0px;">
            <td style="width:1200px;">视频传播效果</td>                       
          </tr>
        </table>
        
      </div>
 <!--条形图-->     
    <div class="line-1px" />
      <div style="display: flex; justify-content: space-around">

        <div id="main" style="width: 20000px;height:1000px;"></div>

      </div>
<!--end-->

<!--视频标签-->

    <table>
      <tr>
        <td>视频标签(点击标签，查看30天内相关标签热门视频TOP10)</td>
      </tr>
    </table>
    
    <div class="line-1px" />
      <div style="display: flex; justify-content: space-around">
               
      <!--按钮-->
        <el-radio-group style="width:1800px;height:100px;" v-model="classify">
          <el-radio-button
            v-for="(item, key) in classifyOptions"
            :label="item"
            :key="key"
          ></el-radio-button>
        </el-radio-group >                  

      </div>
<!--end-->    
      </el-card>

<!--e分页5-->

<!--<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
       <table class="total-table">
          <tr>
            <td style="width:500px;">视频信息</td>
            
            <td style="width:85px;">播放数</td>
          
            <td style="width:85px;">点赞数</td>
        
            <td style="width:85px;">弹幕数</td>
            
            <td style="width:85px;">收藏数</td>
            
            <td style="width:130px;">投币数</td>
            
            <td>操作</td>

            <td>  </td>

          </tr>
        </table>                    
        </div>
      </div>
    </el-card>

    <el-card class="margin-top-20">          
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
        
          <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar">
              <table>
                <tr>
                  <td >1</td>
                  <td>New</td>
                </tr>
              </table>

              <a href="./CoreList.vue#c1" target="_blank" class="anchor">
                <img
                  src="http://pics0.baidu.com/feed/574e9258d109b3de7694cc410288bd87800a4caa.jpeg"
                  
                  width="185px"
                  height="90px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">01:13</div>
            </div>
          
            <div  class="up-info__info">
              <div>
                <span class="font-bolder">小鬼演唱会疑似被鬼屋附身</span>
              </div>
              <div><span>简介</span><span>微博 太哈人了</span></div>
              <div class="info-list-name">
                西姆斯饼饼 | 2021-06-01 11:30:26 发布
              </div>
              

            </div>
        </div>

      <table class="total-table">

          <tr>
            
            <td style="width:90px;">10.6W</td>
            <td style="width:90px;">4.1W</td>
            <td style="width:90px;">4000</td>
            <td style="width:90px;">6.5W</td>
            <td style="width:90px;">11.0W</td>
            <td style="width:45px;">分析</td>
            <td>播放</td>
          </tr>

          <tr>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
          </tr>

          
        </table>
      </div>     
      </div>             
    </el-card>-->




  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "",
  data: function () {
    return {
      classifyOptions: [
        "全部",
        "时尚",
        "生活",
        "美食",
        "动画",
        "音乐",
        "舞蹈",
        "游戏",
        "知识",
      ]
    };
  },

  components: {},

  computed: {},

  mounted: function () {
    this.line()
  },

  methods: {
    //第一个图
    line(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
    title: {
        //text: '世界人口总量',
        //subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['本视频数据', 'UP主视频平均数据']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['分享数','投币数', '弹幕数', '评论数', '收藏数', '点赞数', '播放数']
    },
    series: [
        {
            name: '本视频数据',
            type: 'bar',
            data: [6581,71556, 22920, 6006, 29935, 274672, 2404094]
        },
        {
            name: 'UP主视频平均数据',
            type: 'bar',
            data: [12192,128287, 27382, 5893, 48523, 409258, 4741816]
        }
    ]
      };

option && myChart.setOption(option);





//到此结束
  
    
    }
  },
};
</script>
<style lang="scss" scoped>
.page-result {
  height: 1000px;

  .column-1px {
    border-left: 1px solid #f6f7fb;
    margin: 0 20px;
    height: 120px;
  }
  .up-info__avatar {
    width: 184px;
    height: 115px;
    position: relative;

    margin-right: 16px;
    border-radius: 2px;
    text-align: center;

    .time {
      color: #999;
      margin-top: 10px;
      display: block;
      width: 39px;
      height: 17px;
      background: #000;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 2px 0 2px 0;
      color: #fff;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .up-info__info {
    height: 120px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 10px;
    
    .tagList {
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      margin-right: -4px;
      .tag {
        color: #909399;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
        text-align: center;
        padding: 1px 3px;
      }
    }
  }
  }

</style>